<script>
import Api from '@/api'
export default {
  data() {
    return {
      designWidth: 3840,
      designHeight: 2160,
    };
  },
  computed: {
    appInnerStyle() {
      return {
        'width': `${this.designWidth}px`,
        'height': `${this.designHeight}px`,
      }
    }
  },
  watch: {
  },
  created() {
    window.showFrameRate = function (v) {
      if (!window.scene) { return }
      window.scene.debugShowFramesPerSecond = v;
    }
  },
  components: {},
  mounted() {
    const that = this;
    this.init3DViewer();
    function resize() {
      let clientWidth = documentElement.clientWidth;
      let clientHeight = documentElement.clientHeight;
      let dpr = 1;
      let widthReal;
      let heightReal;
      if ((clientWidth / clientHeight) > (that.designWidth / that.designHeight)) {
        dpr = clientHeight / that.designHeight;
        widthReal = that.designWidth * clientHeight / that.designHeight;
        heightReal = clientHeight;
      } else {
        dpr = clientWidth / that.designWidth;
        widthReal = clientWidth;
        heightReal = clientWidth * that.designHeight / that.designWidth;
      }
      let appDomOuter = document.getElementById('app-outer');
      appDomOuter.style.width = `${widthReal}px`;
      appDomOuter.style.height = `${heightReal}px`;

      let appDomInner = document.getElementById('app-inner');
      appDomInner.style.transform = `scale(${dpr}) translateX(-50%) translateY(-50%)`;
    }
    window.addEventListener('resize', resize)
    setTimeout(() => {
      resize();
    }, 0)
  },
  beforeUnmount() {
  },
  methods: {
    // 天空盒
    loadSkyBox() {
      return
      // 缓存默认天空盒
      window.SkyBoxOfOriginSkyBox = window.scene.skyBox;
      // 蓝天
      window.SkyBoxOfBlueSkyBox = new window.SuperMap3D.SkyBox({
        sources: {
          positiveX: "./images/蓝天/Right.jpg",
          negativeX: "./images/蓝天/Left.jpg",
          positiveY: "./images/蓝天/Front.jpg",
          negativeY: "./images/蓝天/Back.jpg",
          positiveZ: "./images/蓝天/Up.jpg",
          negativeZ: "./images/蓝天/Down.jpg",
        },
      });
      window.scene.skyBox = window.SkyBoxOfBlueSkyBox;
    },
    // 场景初始化 生成全局 scene
    init3DViewer() {
      const viewer = (window.viewer = new SuperMap3D.Viewer("cesium-container", {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        geocoder: false,
        timeline: false,
        homeButton: false,
        infoBox: false,
        shouldAnimate: true,
        shadows: false,
        navigation: false,
        selectionIndicator: false,
        terrainExaggeration: 1,
        contextOptions: {
          msaaLevel: 8,
          requestWebgl2: true,
          contextType: 8,
        },
      }));
      viewer.screenSpaceEventHandler.removeInputAction(SuperMap3D.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
      viewer.resolutionScale = window.devicePixelRatio;

      window.scene = viewer.scene;
      viewer.scene.sun.show = false;
      viewer.scene.skyBox.show = false;
      viewer.scene.undergroundMode = true;
      viewer.scene.globe.baseColor = new SuperMap3D.Color(0, 0, 0, 0);

      window.scene.moon.show = false;
      window.scene.globe.depthTestAgainstTerrain = true;
      window.scene.skyAtmosphere.show = false; //大气
      window.scene.colorCorrection.show = true;
      window.scene.colorCorrection.brightness = 1.05;
      window.scene.colorCorrection.contrast = 1.15;
      window.scene.colorCorrection.saturation = 1.15;
      viewer.scene.fog.enabled = false;
      viewer.shadows = false;
      window.OriginTerrainProvider = viewer.terrainProvider
      viewer._bottomContainer.style.display = 'none'
      // this.loadSkyBox();
      this.$store.commit('SET_CESIUM_SCENE_CREATED')
      this.init3DMainScene();
      // 隐藏掉球的底图
      // this.hideBaseImageLayer()
      window.showFrameRate(true)
    },
    hideBaseImageLayer() {
      const base = viewer.imageryLayers._layers[0];
      if (base) {
        base.alpha = 0;
      }
    },
    loadInOriginView() {
      // 视角切换
      window.viewer.camera.setView({
        destination: new SuperMap3D.Cartesian3(
          window.SUPER_GIS_SPACE.originView.destination[0],
          window.SUPER_GIS_SPACE.originView.destination[1],
          window.SUPER_GIS_SPACE.originView.destination[2]
        ),
        orientation: window.SUPER_GIS_SPACE.originView.orientation,
      });
    },
    // 加载主场景
    init3DMainScene() {
      const that = this;
      this.loadInOriginView();
      // 定义一个矩形范围
      // let west = SuperMap3D.Math.toRadians(-1);
      // let south = SuperMap3D.Math.toRadians(-1);
      // let east = SuperMap3D.Math.toRadians(1);
      // let north = SuperMap3D.Math.toRadians(1);
      // let rectangle = new SuperMap3D.Rectangle(west, south, east, north);
      // this.loadInOriginView();
      // viewer.camera.moveEnd.addEventListener(function () {
      //   const position = viewer.camera.position;
      //   const positionCartographic = viewer.camera.positionCartographic;
      //   const ca = SuperMap3D.Cartographic.fromCartesian(position);
      //   if (!SuperMap3D.Rectangle.contains(rectangle, positionCartographic)) {
      //     that.loadInOriginView();
      //   }
      //   if ((ca && ca.height > 1600 * 1000)) {
      //     that.loadInOriginView();
      //   }
      // })
    }
  },
};
</script>

<template>
  <div id="app-outer">
    <div id="cesium-container"></div>
    <div id="app-inner" 
      :style="appInnerStyle"
      class="cesium-container-loading" v-loading="globalLoading"
      element-loading-background="rgba(0, 0, 0, 0.5)">

      <!-- 路由 -->
      <div class="router-view has-points-events">
        <RouterView />
      </div>
      <!-- 遮罩 -->
      <div class="mask-custom"></div>
    </div>
  </div>


</template>

<style lang="less" scoped>
#cesium-container {
  width: 100%;
  height: 100%;
}

#app-inner {
  transform-origin: 0px 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.cesium-container-loading {
  // background-color: #000;
}
</style>
